<template>
  <div>  
    <el-table
      :data="dataList"
      :highlight-current-row="true"
      :max-height="1500"
      :size="size"
      v-loading="loading"
      align="align"
    >
      <el-table-column align="center" label="商品编码" prop="mpCode"></el-table-column>
      <el-table-column align="center" label="商品名称" prop="mpName"></el-table-column>
      <el-table-column align="center" label="商品分类" prop="mpName"></el-table-column>
      <el-table-column align="center" label="商品库存" prop="mpName"></el-table-column>
      <el-table-column align="center" label="原价（元）" prop="mpName"></el-table-column>
      <el-table-column align="center" label="所属店铺" prop="mpName"></el-table-column>
      <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <kt-button
                    type="text"
                    class="textButton"
                    @click="viewDetail(scope.row)"
                    label="查看详情"
                />
                <kt-button
                    v-if="showEdit"
                    type="text"
                    class="textButton"
                    @click="renewAdd(scope.row)"
                    label="重新添加"
                />
            </template>
      </el-table-column>

    </el-table>
    <!--分页栏-->
    <div class="toolbar t_r">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="refreshPageRequest"
        :current-page="dataForm.pageNo"
        :page-size="dataForm.pageSize"
        :total="totalSize"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>

    <!-- 查看详情弹窗 -->
    <el-dialog title="互斥活动详情" :visible.sync="dialogVisible">
      <div>
         <el-table
            :data="dataList"
            :highlight-current-row="true"
            :max-height="1500"
            :size="size"
            v-loading="loading"
            align="align"
            >
            <el-table-column align="center" label="互斥活动编码" prop="mpCode"></el-table-column>
            <el-table-column align="center" label="互斥活动名称" prop="mpName"></el-table-column>
            <el-table-column align="center" label="互斥活动时间">
                <template slot-scope="scope">
                    {{scope.row.startTime}}至{{scope.row.endTime}}
                </template>
            </el-table-column>
            <el-table-column align="center" label="活动状态">
                <template slot-scope="scope">
                    <!--活动状态 0初始化 1 待提交  2 待审核  3未开始 4 审核不通过  5 进行中  6 已过期  7 已关闭-->
                    <span v-if="scope.row.status == 9">草稿状态</span>
                    <span v-else-if="scope.row.status == 1">待提交</span>
                    <span v-else-if="scope.row.status == 2">待审核</span>
                    <span v-else-if="scope.row.status == 3">未开始</span>
                    <span v-else-if="scope.row.status == 4">审核不通过</span>
                    <span v-else-if="scope.row.status == 5">进行中</span>
                    <span v-else-if="scope.row.status == 6">已过期</span>
                    <span v-else-if="scope.row.status == 7">已关闭</span>
                    <span v-else-if="scope.row.status == 8">已结束</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="创建人" prop="mpName"></el-table-column>
            <el-table-column align="center" label="创建组织" prop="mpName"></el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar t_r">
            <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                @current-change="refreshPageRequest"
                :current-page="dataForm.pageNo"
                :page-size="dataForm.pageSize"
                :total="totalSize"
                :page-sizes="[10, 20, 30, 40]"
                @size-change="handleSizeChange"
            ></el-pagination> 
        </div>
      </div>
      <div slot="footer" class="dialog-footer t_c">
        <el-button type="primary" plain @click="dialogVisible=false" size="mini">关闭</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";

export default {
    name: "mutexProductTable",
    components: {
        KtButton
    },
    props: {
        showEdit: {
            type: Boolean,
            default: true
        },
    },
    data() {
         return {
            dialogVisible: true,
            loading : false,
            dataForm: {
                pageNo: 1,
                pageSize: 10
            },            //请求参数
            totalSize: 0, //总条数
            size: "small", //
            dataList: [], //数据列表

         }
    },
    methods:{
        //重新添加
        renewAdd(row){

        },
        //查看详情
        viewDetail(row){
            this.dialogVisible = true;
        },
        //换页刷新
        refreshPageRequest(){
            
        },
        //条数变更
        handleSizeChange(){

        },
        //初始化
        init(){
            // this.loading = true;
            //请求父组件 渲染数据
            this.$emit("findPage",this.dataForm);
        },
        setData(res){
            this.loading = false;
            if(res != null){
                this.dataList = res.row;
                this.totalSize = res.total;
            }
        }
    },
    mounted() {
        this.dataForm.pageNo = 1;
        this.dataForm.pageSize = 10;
        this.init();
    }
}
</script>

<style lang="scss" scoped>

</style>